<template>
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="#" class="brand-link">
      <span class="brand-text font-weight-light" id="title">题库</span>
    </a>
    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img
            v-if="loginUser == null"
            src="./../../assets/img/user2-160x160.jpg"
            class="img-circle elevation-2"
            alt="User Image"
          />
          <img
            v-if="loginUser != null && loginUser.photo"
            :src="'http://localhost:8080' + loginUser.photo"
            class="img-circle elevation-2"
            alt="User Image"
            @click="viewUserInfo"
            style="cursor: pointer"
          />
        </div>
        <div class="info">
          <span v-if="loginUser == null"
            ><router-link to="/login" class="d-block">未登录</router-link></span
          >
          <span v-else
            ><a href="#" @click="viewUserInfo">{{
              loginUser.nickname
            }}</a></span
          >
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul
          class="nav nav-pills nav-sidebar flex-column"
          data-widget="treeview"
          role="menu"
          data-accordion="true"
        >
          <!-- Add icons to the links using the .nav-icon class
	                 with font-awesome or any other icon font library -->
          <li class="nav-item has-treeview">
            <router-link to="/home" class="nav-link">
              <i class="el-icon-s-home"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                主页
                <i class="el-icon-sunny right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/subject" class="nav-link">
              <i class="el-icon-tickets"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                学科管理
                <i class="el-icon-cloudy right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/stage" class="nav-link">
              <i class="el-icon-date"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                阶段管理
                <i class="el-icon-light-rain right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/questionType" class="nav-link">
              <i class="el-icon-document-copy"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                试题类型管理
                <i class="el-icon-cloudy-and-sunny right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/difficulty" class="nav-link">
              <i class="el-icon-s-opportunity"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                难度管理
                <i class="el-icon-moon-night right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/question" class="nav-link">
              <i class="el-icon-tickets"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                试题管理
                <i class="el-icon-moon right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/paper" class="nav-link">
              <i class="el-icon-s-help"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                考试
                <i class="el-icon-cloudy-and-sunny right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/paperrecord" class="nav-link">
              <i class="el-icon-receiving"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                考试记录
                <i class="el-icon-thumb right"></i>
              </p>
            </router-link>
          </li>

          <li class="nav-item has-treeview">
            <router-link to="/analyzepaper" class="nav-link">
              <i class="el-icon-data-line"></i>&nbsp;&nbsp;&nbsp;&nbsp;
              <p>
                考试结果分析
                <i class="el-icon-cpu right"></i>
              </p>
            </router-link>
          </li>

        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
</template>

<script>
export default {
  name: "MenuBar",
  computed: {
    loginUser() {
      return this.$store.getters.getLoginUser;
    },
  },
  methods: {
    viewUserInfo() {
      this.$router.push("/userinfo");
    },
  },
};
</script>

<style>
#title {
  margin-left: 90px;
}
</style>
